﻿
@{
    ViewData["Title"] = "FormPicker";
}

<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Form Picker</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Form Components</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Form Picker</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="alert alert-primary" role="alert">
                                    <p>Use our extra helper file for quick setup Form Components in your page - <a href="index-form-package.html" target="_blank" class="alert-link">CHECKOUT</a></p>
                                    <label class="text-muted">Copy/paste source code in your page in just couples of seconds.</label>
                                </div>
                            </div>
                            <!-- [  datetimepicker ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Material Datetimepicker</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-md-4 m-b-30">
                                                <h5>Date Picker</h5>
                                                <hr>
                                                <input type="text" id="date" class="form-control" placeholder="Date">
                                            </div>
                                            <div class="col-md-4 m-b-30">
                                                <h5>Time Picker</h5>
                                                <hr>
                                                <input type="text" id="time" class="form-control" placeholder="Time">
                                            </div>
                                            <div class="col-md-4 m-b-30">
                                                <h5>Date Time Picker</h5>
                                                <hr>
                                                <input type="text" id="date-format" class="form-control" placeholder="Begin Date Time">
                                            </div>
                                            <div class="col-md-6 m-b-30">
                                                <h5>French Locales (Week starts at Monday)</h5>
                                                <hr>
                                                <input type="text" id="date-fr" class="form-control" value="18/03/2015 08:00" placeholder="Date de début">
                                            </div>
                                            <div class="col-md-6 m-b-30">
                                                <h5>Min Date Set</h5>
                                                <hr>
                                                <input type="text" id="min-date" class="form-control" placeholder="Start Date">
                                            </div>
                                            <div class="col-md-12 m-b-30">
                                                <h5>Events</h5>
                                                <hr>
                                                <div class="row">
                                                    <div class="col-sm-6 mb-1">
                                                        <input type="text" id="date-start" class="form-control" placeholder="Start Date">
                                                    </div>
                                                    <div class="col-sm-6 mb-1">
                                                        <input type="text" id="date-end" class="form-control" placeholder="End Date">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [  datetimepicker ] end -->
                            <!-- [ color-picker ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Color Picker</h5>
                                    </div>
                                    <div class="card-block">
                                        <h5>Control Types</h5>
                                        <hr>
                                        <div class="row">
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Hue (default)</h6>
                                                <input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Saturation</h6>
                                                <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Brightness</h6>
                                                <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Wheel</h6>
                                                <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
                                            </div>
                                        </div>
                                        <h5 class="mt-4">Input Modes</h5>
                                        <hr>
                                        <div class="row">
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Text Field</h6>
                                                <input type="text" id="text-field" class="form-control demo" value="#70c24a">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Hidden Input</h6>
                                                <input type="hidden" id="hidden-input" class="demo" value="#f4f7fa">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Inline</h6>
                                                <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
                                            </div>
                                        </div>
                                        <h5>Positions</h5>
                                        <p class="mb-0">Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top left</code>, and <code>top right</code>.</p>
                                        <hr>
                                        <div class="row">
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Bottom Left (default)</h6>
                                                <input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Top Left</h6>
                                                <input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Bottom Right</h6>
                                                <input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc">
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h6>Top Right</h6>
                                                <input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc">
                                            </div>
                                        </div>
                                        <h5>RGB(A)</h5>
                                        <hr>
                                        <div class="row">
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>RGB</h6>
                                                <input type="text" id="rgb" class="form-control demo" data-format="rgb" value="rgb(33, 147, 58)">
                                                <span class="help-block mt-1 d-block">RGB input can be assigned by setting the <code>format</code> option to <code>rgb</code>.</span>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>RGBA</h6>
                                                <input type="text" id="rgba" class="form-control demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
                                                <span class="help-block mt-1 d-block">RGBA input can be assigned by setting the <code>format</code>option to <code>rgb</code> and <code>opacity</code> option to<code>true</code>.</span>
                                            </div>
                                        </div>
                                        <h5>&hellip;And More!</h5>
                                        <hr>
                                        <div class="row">
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>Opacity</h6>
                                                <input type="text" id="opacity" class="form-control demo mb-1" data-opacity=".5" value="#766fa8">
                                                <span class="help-block">Opacity can be assigned by including the <code>data-opacity</code>attribute or by setting the <code>opacity</code> option to<code>true</code>.</span>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>Keywords</h6>
                                                <input type="text" id="keywords" class="form-control demo mb-1" data-keywords="transparent, initial, inherit" value="transparent">
                                                <span class="help-block">CSS-wide keywords can be assigned by setting the <code>keywords</code>option to a comma-separated list of valid keywords: <code>transparent,initial, inherit</code>.</span>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>Default Value</h6>
                                                <input type="text" id="default-value" class="form-control demo mb-1" data-defaultValue="#ff6600">
                                                <span class="help-block">This field has a default value assigned to it, so it will never be empty.</span>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>Letter Case</h6>
                                                <input type="text" id="letter-case" class="form-control demo mb-1" data-letterCase="uppercase" value="#abcdef">
                                                <span class="help-block">This field will always be uppercase.</span>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>Input Groups</h6>
                                                <div class="input-group">
                                                    <input type="text" id="input-group" class="form-control demo" value="#ff0000" />
                                                </div>
                                                <span class="help-block mt-1 d-block">Example using Bootstrap's input groups.</span>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6 class="input-group-addon">Color</h6>
                                                <input type="text" id="more-input-group" class="form-control demo mb-1" value="#1a5ef0" />
                                                <span class="help-block">Input group example with addon.</span>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>Swatches</h6>
                                                <div class="form-group">
                                                    <input type="text" id="swatches" class="form-control demo mb-1" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e"
                                                           value="#abcdef">
                                                    <span class="help-block">Example with swatches.</span>
                                                </div>
                                            </div>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <h6>Swatches and Opacity</h6>
                                                <div class="form-group">
                                                    <input type="text" id="swatchesandop" class="form-control demo mb-1" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="rgba(14, 206, 235, .5)">
                                                    <span class="help-block">Example with swatches and opacity.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ color-picker ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->

@section Styles{
    <!-- material datetimepicker css -->
    <link rel="stylesheet" href="~/assets/plugins/material-datetimepicker/css/bootstrap-material-datetimepicker.css">
    <!-- Bootstrap datetimepicker css -->
    <link rel="stylesheet" href="~/assets/plugins/bootstrap-datetimepicker/css/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" href="~/assets/fonts/material/css/materialdesignicons.min.css">
    <!-- minicolors css -->
    <link rel="stylesheet" href="~/assets/plugins/mini-color/css/jquery.minicolors.css">
}

@section Scripts{
    <!-- material datetimepicker Js -->
    <script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
    <script src="~/assets/plugins/material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>

    <!-- minicolors Js -->
    <script src="~/assets/plugins/mini-color/js/jquery.minicolors.min.js"></script>

    <!-- form-picker-custom Js -->
    <script src="~/assets/js/pages/form-picker-custom.js"></script>
}

